<template>
    <div class="mhdetail subchild">
         <header class="head">
                <van-icon name="arrow-left" size="20" @click="ClickLeft"/>
                <h1 v-if="title" class="van-ellipsis">{{title.title}}</h1>
        </header>
        <div id="mhimg">
            <div v-for="(item,index) in list" :key="index" class="mhimg">
                <img :src="(item.trim())" alt="">
            </div>
        </div>
    </div>
</template>

<script>
import {mapState,mapMutations} from "vuex";
import { Toast } from 'vant';

export default {
    data(){
        return{
            title:{
                title:"漫画"
            },
            index:null,
            list:[],
            flag:false,
        }
    },
    computed:{
        ...mapState(["mhList"])
    },
    methods:{
        ...mapMutations(["setreverse"]),
        ClickLeft(){
            this.$router.back(-1)
        },
        gettop(){
            // let html=document.documentElement||document.body
            var scollrTop = document.documentElement.scrollTop || document.body.scrollTop
            if(scollrTop==0){
                if(this.index>0){
                    var b = this.index-1
                    console.log(b)
                    this.title = this.mhList[b]
                     this.$ajax.cartoonContent({
                        chapterId:this.title.chapterId
                    }).then(res=>{
                        if(res.code==200){
                            this.index = b
                            this.list =res.data.content
                            // html.scrollTop=0
                            document.documentElement.scrollTop = document.body.scrollTop =0
                        }
                    })
                }else{
                    Toast('这已经是第一话了');
                }
            }
        },
        getnext(){
            // let html=document.documentElement||document.body
            var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
            var scollrTop = document.documentElement.scrollTop || document.body.scrollTop
            let bodyScrollHeight = 0
            let documentScrollHeight = 0
            if (document.body) {
                bodyScrollHeight = document.body.scrollHeight
            }
            if (document.documentElement) {
                documentScrollHeight = document.documentElement.scrollHeight
            }
            var ScrollHeight=(bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight
            if(scollrTop>=ScrollHeight-h){
                if(this.index<this.mhList.length-1){
                    var a = this.index + 1
                    this.title = this.mhList[a]
                    this.$ajax.cartoonContent({
                        chapterId:this.title.chapterId
                    }).then(res=>{
                        if(res.code==200){
                            this.index = a
                            this.list =res.data.content
                            // html.scrollTop=0
                            document.documentElement.scrollTop = document.body.scrollTop = 0
                        }
                    })
                }else{
                    Toast('已经是最后一话了');
                }
            }
        }
    },
    mounted(){
        this.mhList.forEach((item,i)=>{
            if(item.chapterId==this.$route.query.chapterId){
                this.index = i
                // if(i!=0&&(this.mhList[i].chapterId>this.mhList[i+1].chapterId)){
                //     this.setreverse()
                // }
            }
        })
        
        this.title=this.mhList[this.index]
        this.$ajax.cartoonContent({
            chapterId:this.title.chapterId
        }).then(res=>{
            if(res.code==200){
                this.list=res.data.content
            }
        })
        
        window.addEventListener('touchend',this.getnext)
        console.log(document.querySelectorAll("#mhimg"))
        document.querySelectorAll("#mhimg")[0].addEventListener("touchend",this.gettop)
    },
    destroyed () {
        window.removeEventListener('touchend', this.getnext)
        document.querySelectorAll("#mhimg")[0].removeEventListener("touchend",this.gettop)
    },
}
</script>

<style lang="scss" scoped>
.head{
    position: fixed;
    top: 0;
    height: 46px;
    padding: 0 20px;
    color: #fff;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #b83320;
    h1{
        font-size: 16px;
        text-align: center
    }
}

.mhimg{
    width: 100%;
    img{
        width: 100%;
    }
}
</style>


